<template>
  <div>

	  <myheader></myheader>
     
   	
		<div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<!-- <ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul>
	 -->
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<!-- <div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div> -->
				
				<!-- 幻灯片 -->
				<Carousel :heigth="700" :datas="params" @click="click" pageTheme="circle">

				</Carousel>
				
			
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<div class="row">

					<!-- 遍历商品列表 -->

					<div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<a :href="'/item?id='+item.id"><img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img+''"	width="240" height="240">
							</a>
							<figcaption>
								<div class="thumb-overlay"><a :href="'/item?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>
						<h4><a :href="'/editgood?id='+item.id">修改商品</a></h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
					</div>
					
				</div>


				<br />
					<!-- heyui分页 -->
					<div>

						<Pagination v-model="pagination" @change="change" layout="pager,jumper" small ></Pagination>
						
					</div>

					<!-- 自主分页 -->
					<br><br>
					<div>

						<a @click="getdata(lastpage)" v-show="lastpage">上一页</a>
						<ul>

							<li v-for="index in all">

								<a @click="getdata(index)">{{index}}</a>

							</li>
						</ul>

						<a @click="getdata(nextpage)" v-show="nextpage">下一页</a>
						
					</div>
				<br />

			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<footer class="footer">
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

// 导包
import myheader from './myheader.vue';

export default {
  data () {
    return {
	  msg: "这是一个变量",
	//   自主分页
	total:0, //商品总数
	cur:1,	//当前页
	all:0,	//总页数
	lastpage:0, //上一页
	nextpage:0, //下一页
	size:2,

	//   分页器变量
	pagination:{
      	page:1,
      	size:3,
      	total:5
	},
	//商品列表
    datalist:[],
	//   幻灯片数据
	  params:[
		  {

			  titla:'第一张',
			  link:'http://www.baidu.com',
			  image:'http://q79iv9k3k.bkt.clouddn.com/317741.jpg', 

		  },
		  {

			  titla:'第二张',
			  link:'http://www.baidu.com',
			  image:'http://q79iv9k3k.bkt.clouddn.com/FnKxQyUzFh4jwS4Zg54VEgiKGwS7', 

		  }
	  ]
    }
  },
  //注册组件标签
  components:{

  		'myheader':myheader

  },
mounted:function(){

	// 调用自主分页接口
	this.getdata(1);

	// //请求商品接口
  	// //发送请求
    //   this.axios.get('http://localhost:8000/goodslist/',{params:{page:1,size:3}}).then((result) =>{

    //           console.log(result);
    //           this.datalist = result.data.data;

	//   });
	  
	//   幻灯片请求
	this.axios.get('http://localhost:8000/picslist/').then((result) =>{

					var mylist = result.data;
					var datalist = [];
					//遍历
					for(let i=0,l=mylist.length;i<l;i++){
						datalist.push({title:mylist[i]['title'],link:mylist[i]['link'],image:mylist[i]['img']});
					}

					this.params = datalist

	});
  
},
  methods:{

	  //自主分页接口
	  getdata:function(mypage){
		  
			//发送请求
		this.axios.get('http://localhost:8000/goodslist/',{params:{page:mypage,size:this.size}}).then((result) =>{

				console.log(result);
				this.datalist = result.data.data;
				
				// 判断上一页
				if(mypage==1){

					this.lastpage = 0;

				}else{

					this.lastpage = mypage - 1;

				}
				
				// 计算总页数
				this.all = Math.ceil(result.data.total / this.size);

				// 判断下一页
				if(mypage==this.all){

					this.nextpage = 0;

				}else{

					this.nextpage = mypage + 1;
					
				}
		});


	  },
	//分页器事件
  	change:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result) =>{

              console.log(result);
              this.datalist = result.data.data;

      });

  	},

	//   幻灯片点击事件
	click:function(index,data){
		console.log(data);
		// 点击后跳转具体页面
		window.location.href = data.link
	}
     
  }
}


</script>
 
<style>



</style>


// --------------------------------------------------------------------------------------------------------------------------



